<template>
	<div
		class="pizza_bg"
		:class="{
			pizza_bg_other: this.step == 1,
			pizza_bg_other2: step == 4,
			pizza_bg_other1: step == 5,
		}"
	>
		<div class="pizza_container">
			<div class="pizza_container_step1" v-if="step == 1">
				<div class="pizza_div_img pizza_div_img1">
					<img
						src="https://res.metaera.hk/resources/assets/images/pizza/组_12574.svg"
					/>
				</div>
				<div class="pizza_div_img">
					<img
						src="https://res.metaera.hk/resources/assets/images/pizza/组 192434@3x.png"
					/>
				</div>

				<div class="pizza_bottom_btn" @click="stepClick(4)">
					<div class="pizza_bottom_btn_img">
						<img
							src="https://res.metaera.hk/resources/assets/images/pizza/组 192197.svg"
						/>
					</div>
					<div class="pizza_bottom_btn_title"> 立即开测 </div>
				</div>
			</div>

			<div class="pizza_container_step4" v-if="step == 4">
				<div class="pizza_div_img pizza_div_img1">
					<img
						src="https://res.metaera.hk/resources/assets/images/pizza/组_12574.svg"
					/>
				</div>
				<div class="pizza_div_img">
					<img
						src="https://res.metaera.hk/resources/assets/images/pizza/组 192431@3x.png"
					/>
				</div>

				<div class="pizza_question_bg">
					<div class="pizza_question_title">
						{{ questionList[question_num].id }}.{{
							questionList[question_num].name
						}}
					</div>
					<div class="pizza_question_content">
						<div
							class="pizza_question_item"
							@click="questionSelectClick(index)"
							v-for="(item, index) in questionList[question_num].options"
							:key="index"
						>
							<div class="pizza_question_item_q" v-if="!item.selected">
								<img
									src="https://res.metaera.hk/resources/assets/images/pizza/组件 1@2x.png"
								/>
							</div>
							<div class="pizza_question_item_q" v-if="item.selected">
								<img
									src="https://res.metaera.hk/resources/assets/images/pizza/组件 2@2x.png"
								/>
							</div>
							<div class="pizza_question_item_title">
								{{ item.name }}
							</div>
						</div>
					</div>

					<div
						class="pizza_bottom_btn pizza_bottom_btn_2"
						@click="questionSureClick(-1)"
						v-if="question_num < questionList.length - 1 && question_num > 0"
					>
						<div class="pizza_bottom_btn_img">
							<img
								src="https://res.metaera.hk/resources/assets/images/pizza/组 192197.svg"
							/>
						</div>
						<div class="pizza_bottom_btn_title"> 上一题 </div>
					</div>

					<div
						class="pizza_bottom_btn_two"
						v-if="question_num == questionList.length - 1"
					>
						<div
							class="pizza_bottom_btn pizza_bottom_btn_3"
							@click="questionSureClick(-1)"
						>
							<div class="pizza_bottom_btn_img">
								<img
									src="https://res.metaera.hk/resources/assets/images/pizza/组 192197.svg"
								/>
							</div>
							<div class="pizza_bottom_btn_title"> 上一题 </div>
						</div>

						<div
							class="pizza_bottom_btn pizza_bottom_btn_3"
							@click="questionSureClick(0)"
						>
							<div class="pizza_bottom_btn_img">
								<img
									src="https://res.metaera.hk/resources/assets/images/pizza/组 192197.svg"
								/>
							</div>
							<div class="pizza_bottom_btn_title"> 提交 </div>
						</div>
					</div>
				</div>

				<ProgressBarWithText
					class="pizza_progress"
					:currentProgress="question_num + 1"
					:maxProgress="questionList.length"
				/>

				<div style="height: 50px"></div>
			</div>

			<div class="pizza_container_step5" v-if="step == 5">
				<div
					class="pizza_div_img pizza_div_img_info"
					:class="{ pizza_div_img_info_fold: fold }"
				>
					<img :src="personalityList[resultPersonalityId - 1].picture" />
				</div>
				<div class="pizza_showmore" @click="showMoreClick()" v-if="fold">
					<p>点击下拉查看更多</p>
					<img
						src="https://res.metaera.hk/resources/assets/images/pizza/组 192275@3x.png"
					/>
				</div>
				<div class="pizza_btns">
					<div class="pizza_download" @click="downloadClick()">
						点击下载图片
					</div>
					<div class="pizza_reset" @click="resetStep()"> 重新测评 </div>
				</div>

				<div
					class="pizza_bottom_btn pizza_bottom_btn_4"
					v-if="!this.metaera_twitter_user_id"
				>
					<div class="pizza_bottom_btn_title_1" @click="depthReportClick()">
						关注MetaEra获取深度报告
					</div>
				</div>

				<div class="pizza_div_img" v-if="this.metaera_twitter_user_id">
					<img :src="personalityList[resultPersonalityId - 1].depthPicture" />
				</div>

				<div
					class="pizza_bottom_btn pizza_bottom_btn_1"
					v-if="this.metaera_twitter_user_id"
					@click="shareClick()"
				>
					<div class="pizza_bottom_btn_img">
						<img
							src="https://res.metaera.hk/resources/assets/images/pizza/组 192197.svg"
						/>
					</div>
					<div class="pizza_bottom_btn_title"> 分享 </div>
				</div>
				<div class="pizza_div_img">
					<img
						src="https://res.metaera.hk/resources/assets/images/pizza/组 192333@2x.png"
					/>
				</div>
			</div>
		</div>
		<div
			style="
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: #000000ca;
			"
			v-if="olead == true"
		>
			<img
				style="width: 100%"
				src="https://res.metaera.hk/resources/assets/images/aboutus/download_alert1.png"
				alt=""
			/>
		</div>
	</div>
</template>
<script>
import {
	twitterCheckFollow,
	twitterAuthCallback,
	getTwitterAuthUrl,
} from "@/api/home";
import ProgressBarWithText from "@/components/ProgressBarWithText.vue";

export default {
	components: {
		ProgressBarWithText,
	},
	data() {
		return {
			isTwitterApp: false,
			ua: "",
			referrer: "",
			code: "",
			state: "",
			step: 1,
			metaera_twitter_user_id: "",
			// 折叠
			fold: true,
			personalityList: [
				{
					id: 1,
					name: "创世矿工",
					score: 0,
					group: "比特币血统",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192325@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/1.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1创世矿工@4x.png",
				},
				{
					id: 2,
					name: "冷钱包修士",
					score: 0,
					group: "比特币血统",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192326@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/2.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1冷钱包修士@4x.png",
				},
				{
					id: 3,
					name: "闪电网络游侠",
					score: 0,
					group: "比特币血统",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192327@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/3.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1闪电网络游侠@4x.png",
				},
				{
					id: 4,
					name: "Taproot原教旨主义者",
					score: 0,
					group: "比特币血统",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192328@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/4.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1Taproot原教旨主义者@4x.png",
				},
				{
					id: 5,
					name: "智能合约赌徒",
					score: 0,
					group: "以太坊变异体",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192337@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/5.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1智能合约赌徒@4x.png",
				},
				{
					id: 6,
					name: "DAO治理暴君",
					score: 0,
					group: "以太坊变异体",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192338@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/6.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1DAO治理暴君@4x.png",
				},
				{
					id: 7,
					name: "DeFi炼金术士",
					score: 0,
					group: "以太坊变异体",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192323@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/7.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1DeFi炼金术士@4x.png",
				},
				{
					id: 8,
					name: "NFT数字垃圾收藏家",
					score: 0,
					group: "以太坊变异体",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192329@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/8.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1NFT数字垃圾收藏家@4x.png",
				},
				{
					id: 9,
					name: "MEME传教士",
					score: 0,
					group: "狗狗币亚种",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192331@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/9.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1MEME传教士@4x.png",
				},
				{
					id: 10,
					name: "土狗矿工",
					score: 0,
					group: "狗狗币亚种",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192332@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/10.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1土狗矿工@4x.png",
				},
				{
					id: 11,
					name: "社区小丑",
					score: 0,
					group: "狗狗币亚种",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192334@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/11.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1社区小丑@4x.png",
				},
				{
					id: 12,
					name: "马斯克跟风狗",
					group: "狗狗币亚种",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192339@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/12.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1马斯克跟风狗@4x.png",
				},
				{
					id: 13,
					name: "法币舔狗",
					score: 0,
					group: "稳定币变节者",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192340@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/13.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1法币舔狗@4x.png",
				},
				{
					id: 14,
					name: "USDT阴谋家",
					score: 0,
					group: "稳定币变节者",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192345@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/14.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1USDT阴谋家.png",
				},
				{
					id: 15,
					name: "合规圣骑士",
					score: 0,
					group: "稳定币变节者",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192343@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/15.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1合规圣骑士.png",
				},
				{
					id: 16,
					name: "算法稳定币亡命徒",
					score: 0,
					group: "稳定币变节者",
					picture:
						"https://res.metaera.hk/resources/assets/images/pizza/组 192344@2x.png",
					depthPicture:
						"https://res.metaera.hk/resources/assets/images/pizza/15.png",
					downloadPicUrl:
						"https://res.metaera.hk/resources/assets/images/pizza/1算法稳定币亡命徒.png",
				},
			],
			questionList: [
				{
					id: 1,
					name: "周末你更愿意？",
					options: [
						{
							id: 1,
							name: "在家研究技术白皮书",
							selected: false,
							type: 1,
							score: 2,
						}, // 创世矿工
						{
							id: 2,
							name: "参加线上投资讨论会",
							selected: false,
							type: 5,
							score: 2,
						}, // 智能合约赌徒
					],
				},
				{
					id: 2,
					name: "你的手机里最多的是？",
					options: [
						{
							id: 1,
							name: "安全类和工具类APP",
							selected: false,
							type: 2,
							score: 2,
						}, // 冷钱包修士
						{
							id: 2,
							name: "社交和娱乐类APP",
							selected: false,
							type: 9,
							score: 2,
						}, // MEME传教士
					],
				},
				{
					id: 3,
					name: "朋友聚餐时你习惯？",
					options: [
						{
							id: 1,
							name: "主动要求AA制并用数字支付",
							selected: false,
							type: 3,
							score: 2,
						}, // 闪电网络游侠
						{
							id: 2,
							name: "让别人先付，后来转账给他",
							selected: false,
							type: 13,
							score: 2,
						}, // 法币舔狗
					],
				},
				{
					id: 4,
					name: "看到新规定时你的第一反应？",
					options: [
						{
							id: 1,
							name: "又来限制我们的自由",
							selected: false,
							type: 4,
							score: 2,
						}, // 反监管斗士
						{
							id: 2,
							name: "规范发展是好事",
							selected: false,
							type: 15,
							score: 2,
						}, // 合规圣骑士
					],
				},
				{
					id: 5,
					name: "在群聊中你通常？",
					options: [
						{
							id: 1,
							name: "积极发表观点并组织讨论",
							selected: false,
							type: 6,
							score: 2,
						}, // DAO治理暴君
						{
							id: 2,
							name: "专门分享最新的小道消息",
							selected: false,
							type: 10,
							score: 2,
						}, // 土狗矿工
					],
				},
				{
					id: 6,
					name: "你的收藏爱好？",
					options: [
						{
							id: 1,
							name: "喜欢收集限量版数字物品",
							selected: false,
							type: 8,
							score: 2,
						}, // NFT数字垃圾收藏家
						{
							id: 2,
							name: "享受和网友一起玩梗聊天",
							selected: false,
							type: 11,
							score: 2,
						}, // 社区小丑
					],
				},
				{
					id: 7,
					name: "投资决策时你会？",
					options: [
						{
							id: 1,
							name: "对比多个平台寻找最优方案",
							selected: false,
							type: 7,
							score: 2,
						}, // 多链游击队
						{
							id: 2,
							name: "关注大V推荐和热门话题",
							selected: false,
							type: 12,
							score: 2,
						}, // 马斯克跟风狗
					],
				},
				{
					id: 8,
					name: "你认为最安全的存钱方式？",
					options: [
						{
							id: 1,
							name: "分散到几个大平台",
							selected: false,
							type: 14,
							score: 2,
						}, // USDT阴谋家
						{
							id: 2,
							name: "相信数学算法胜过人为控制",
							selected: false,
							type: 16,
							score: 2,
						}, // 算法稳定币亡命徒
					],
				},
				{
					id: 9,
					name: "面对复杂问题你偏向？",
					options: [
						{
							id: 1,
							name: "深入研究底层原理",
							selected: false,
							type: 1,
							score: 2,
						}, // 创世矿工
						{
							id: 2,
							name: "分析各种可能的组合策略",
							selected: false,
							type: 5,
							score: 2,
						}, // 智能合约赌徒
					],
				},
				{
					id: 10,
					name: "你最担心的是？",
					options: [
						{
							id: 1,
							name: "个人信息和资产安全",
							selected: false,
							type: 2,
							score: 2,
						}, // 冷钱包修士
						{
							id: 2,
							name: "错过有趣的网络话题",
							selected: false,
							type: 9,
							score: 2,
						}, // MEME传教士
					],
				},
				{
					id: 11,
					name: "日常消费习惯？",
					options: [
						{
							id: 1,
							name: "尽量使用新型支付方式",
							selected: false,
							type: 3,
							score: 2,
						}, // 闪电网络游侠
						{
							id: 2,
							name: "还是传统方式比较放心",
							selected: false,
							type: 13,
							score: 2,
						}, // 法币舔狗
					],
				},
				{
					id: 12,
					name: "对新政策的态度？",
					options: [
						{
							id: 1,
							name: "质疑权威，保持独立思考",
							selected: false,
							type: 4,
							score: 2,
						}, // 反监管斗士
						{
							id: 2,
							name: "相信专业机构的判断",
							selected: false,
							type: 15,
							score: 2,
						}, // 合规圣骑士
					],
				},
				{
					id: 13,
					name: "在团队项目中你？",
					options: [
						{
							id: 1,
							name: "喜欢制定规则并推动执行",
							selected: false,
							type: 6,
							score: 2,
						}, // DAO治理暴君
						{
							id: 2,
							name: "专注发现新的机会点",
							selected: false,
							type: 10,
							score: 2,
						}, // 土狗矿工
					],
				},
				{
					id: 14,
					name: "你的兴趣爱好倾向？",
					options: [
						{
							id: 1,
							name: "收藏和艺术品鉴赏",
							selected: false,
							type: 8,
							score: 2,
						}, // NFT数字垃圾收藏家
						{
							id: 2,
							name: "社交娱乐和幽默创作",
							selected: false,
							type: 11,
							score: 2,
						}, // 社区小丑
					],
				},
				{
					id: 15,
					name: "获取信息的方式？",
					options: [
						{
							id: 1,
							name: "同时关注多个信息源做对比",
							selected: false,
							type: 7,
							score: 2,
						}, // 多链游击队
						{
							id: 2,
							name: "主要跟随意见领袖的观点",
							selected: false,
							type: 12,
							score: 2,
						}, // 马斯克跟风狗
					],
				},
				{
					id: 16,
					name: "理财观念？",
					options: [
						{
							id: 1,
							name: "稳健保值，分散风险",
							selected: false,
							type: 14,
							score: 2,
						}, // USDT阴谋家
						{
							id: 2,
							name: "相信创新机制的长远价值",
							selected: false,
							type: 16,
							score: 2,
						}, // 算法稳定币亡命徒
					],
				},
			],
			question_num: 0,
			resultPersonalityId: 1,
			olead: false,
		};
	},
	mounted() {
		this.checkIsTwitterApp();
		// 从 $route.params 中获取参数
		this.code = this.$route.params.code;
		this.state = this.$route.params.state;

		// 打印验证
		console.log("Code:", this.code);
		console.log("State:", this.state);
		if (
			this.code &&
			this.state &&
			this.code != "undefined" &&
			this.state != "undefined" &&
			this.code.length > 0 &&
			this.state.length > 0
		) {
			this.twitterAuthCallback();
		}

		this.metaera_twitter_user_id = localStorage.getItem(
			"metaera_twitter_user_id"
		);
		this.resultPersonalityId = localStorage.getItem(
			"metaera_twitter_resultPersonalityId"
		);

		console.log(
			"1--------------this.resultPersonalityId:",
			this.resultPersonalityId
		);

		if (
			this.resultPersonalityId &&
			this.resultPersonalityId != "undefined" &&
			this.resultPersonalityId != "null" &&
			this.resultPersonalityId != ""
		) {
			this.step = 5;
		} else {
			this.step = 1;
		}
	},
	methods: {
		showMoreClick() {
			this.fold = false;
		},
		downloadClick() {
			const imageUrl =
				this.personalityList[this.resultPersonalityId - 1].downloadPicUrl; // 替换为你的图片URL
			const fileName = "pic" + ".png"; // 下载后的文件名

			// 方法1：使用 <a download>（兼容大部分现代浏览器）
			const link = document.createElement("a");
			link.href = imageUrl;
			link.download = fileName;
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);

			// 方法2：如果方法1失败（如iOS Safari），改用新窗口打开
			setTimeout(() => {
				if (!document.querySelector("a[download]")) {
					window.open(imageUrl, "_blank");
				}
			}, 500);
		},
		shareClick() {
			window.open(
				"https://twitter.com/intent/tweet?text=测完破防了：原来我是" +
					this.personalityList[this.resultPersonalityId - 1].group +
					"：" +
					this.personalityList[this.resultPersonalityId - 1].name +
					"—点击查看测试你的加密人格。我正在关注@MetaEraCN，太棒了！&url=https://web.metaera.hk/16personalities",
				"_blank"
			);
		},
		depthReportClick() {
			let ua = navigator.userAgent.toLowerCase();
			//ios终端
			let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.olead = true;
			} else {
				this.getUserInfo();
			}
		},
		questionSelectClick(optionsIndex) {
			for (
				let index = 0;
				index < this.questionList[this.question_num].options.length;
				index++
			) {
				const element = this.questionList[this.question_num].options[index];
				if (index != optionsIndex) {
					this.questionList[this.question_num].options[index].selected = false;
				} else {
					this.questionList[this.question_num].options[index].selected = true;
				}
			}
			if (this.question_num == this.questionList.length - 1) {
			} else {
				this.question_num++;
			}
		},
		questionSureClick(index) {
			this.question_num += index;
			if (this.question_num == this.questionList.length - 1) {
				this.questionSubmit();
			}
		},

		questionSubmit() {
			for (let index = 0; index < this.questionList.length; index++) {
				const element = this.questionList[index];
				for (let num = 0; num < element.options.length; num++) {
					const item = element.options[num];
					if (item.selected) {
						for (let i = 0; i < this.personalityList.length; i++) {
							const personalityItem = this.personalityList[i];
							if (item.type == personalityItem.id) {
								this.personalityList[i].score += item.score;
							}
						}
					}
				}
			}

			const tmpArray = [...this.personalityList].sort(
				(a, b) => b.score - a.score
			);
			this.resultPersonalityId = tmpArray[0].id;
			console.log(this.resultPersonalityId, tmpArray[0].name);

			console.log(
				"2--------------this.resultPersonalityId:",
				this.resultPersonalityId
			);
			localStorage.setItem(
				"metaera_twitter_resultPersonalityId",
				this.resultPersonalityId
			);

			this.step = 5;

			console.log(this.personalityList);
		},
		resetStep() {
			this.step = 1;
			this.question_num = 0;
			this.resultPersonalityId = 0;
			localStorage.setItem("metaera_twitter_resultPersonalityId", "");
		},
		stepClick(step) {
			this.step = step;
		},
		twitterAuthCallback() {
			twitterAuthCallback({
				code: this.code,
				state: this.state,
			})
				.then((res) => {
					if (res.code == 200) {
						// 存储字符串
						localStorage.setItem("metaera_twitter_user_id", res.data.user.id);

						this.metaera_twitter_user_id = localStorage.getItem(
							"metaera_twitter_user_id"
						);
						this.resultPersonalityId = localStorage.getItem(
							"metaera_twitter_resultPersonalityId"
						);

						if (
							this.resultPersonalityId &&
							this.resultPersonalityId != "undefined" &&
							this.resultPersonalityId != "null" &&
							this.resultPersonalityId != ""
						) {
							this.step = 5;
						}
					} else {
						this.$message.error(res.message);
					}
				})
				.catch((error) => {
					this.$message.error(error.message);
				});
		},

		getUserInfo() {
			getTwitterAuthUrl({})
				.then((res) => {
					if (res.code == 200) {
						window.location.href = res.data.url;
					}
				})
				.catch((error) => {
					this.$message.error(error.message);
				});
		},
		checkIsTwitterApp() {
			const ua = navigator.userAgent || navigator.vendor || window.opera;

			const referrer = document.referrer;

			const isFromTwitterRef =
				document.referrer.includes("twitter.com") ||
				document.referrer.includes("https") ||
				document.referrer.includes(".co") ||
				document.referrer.includes("t.");

			this.referrer = referrer;

			this.ua = ua;
			// 判断用户代理是否包含 Twitter 的标识
			const isTwitterApp = /Twitter/.test(ua);
			this.isTwitterApp = isTwitterApp || isFromTwitterRef;
		},
		openTwitterPost() {
			// 替换为你需要跳转的具体文章地址
			const twitterPostUrl =
				"https://x.com/MetaEraCN/status/1920489734281048408";
			window.open(twitterPostUrl, "_blank");
		},
	},
};
</script>
<style scoped>
.pizza_bg {
	width: 100%;
	min-height: 100vh;

	background-size: cover;
	background-position: center;
	background-image: url("https://res.metaera.hk/resources/assets/images/pizza/bg.svg");
}

.pizza_bg_other {
	background-image: url("https://res.metaera.hk/resources/assets/images/pizza/背景.svg");
}

.pizza_bg_other1 {
	background-image: url("https://res.metaera.hk/resources/assets/images/pizza/背景@1x.png");
}

.pizza_bg_other2 {
	background-image: url("https://res.metaera.hk/resources/assets/images/pizza/背景@3x.png");
}

.pizza_container {
	padding-top: 10vh;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 100px;
}

.pizza_div_img {
	margin-top: 10px;
	width: 90%;
	margin-left: 5%;
	height: auto;
}

.pizza_div_img_info {
	height: auto;
}
.pizza_div_img_info_fold {
	width: 90%;
	margin-left: 5%;
	aspect-ratio: 1.03;
	overflow: hidden;
}

.pizza_div_img1 {
	width: 60%;
	margin-left: 20%;
	margin-bottom: 5%;
}

.pizza_div_img2 {
	margin-bottom: 5%;
}

.pizza_div_img img {
	width: 100%;
	height: auto;
	object-fit: fill;
}

.pizza_bottom_btn {
	margin-top: 50px;
	position: relative;

	margin-left: 30%;
	width: 40%; /* Adjust as needed */
	height: auto; /* Adjust as needed */
}

.pizza_bottom_btn_two {
	display: flex;
	width: 80%;
	margin-left: 10%;
}

.pizza_bottom_btn_1 {
	width: 60%;
	margin-left: 20%;
	margin-top: 20px;
}

.pizza_bottom_btn_2 {
	width: 40%;
	margin-left: 30%;
	margin-top: 15%;
}

.pizza_bottom_btn_3 {
	width: 60%;
	margin-left: 0%;
	margin-top: 15%;
	text-align: center;
}

.pizza_bottom_btn_4 {
	width: 80%;
	margin-left: 10%;
	margin-top: 20px;
}

.pizza_bottom_btn_img {
	width: 100%;
	height: auto;
}

.pizza_bottom_btn_img img {
	width: 100%;
	height: auto;
	display: block; /* Remove extra space below image */
}

.pizza_bottom_btn_title {
	position: absolute; /* Overlay on top of the image */
	top: 50%; /* Center vertically */
	left: 50%; /* Center horizontally */
	transform: translate(-50%, -50%); /* Perfect centering */
	color: white; /* Adjust text color */
	font-size: 16px; /* Adjust font size */
	font-weight: bold;
	text-align: center;
	z-index: 1; /* Ensure text appears above the image */
}

.pizza_bottom_btn_title_1 {
	width: 100%;
	aspect-ratio: 410/63;
	background-size: contain;
	background-position: center;
	background-image: url("https://res.metaera.hk/resources/assets/images/pizza/组 192274@2x.png");
	color: white; /* Adjust text color */
	font-size: 20px; /* Adjust font size */
	font-weight: bold;

	display: flex; /* 新增 */
	justify-content: center; /* 新增 */
	align-items: center; /* 新增 */
	line-height: 1;
}
</style>
<style>
.boxCon {
	padding-top: 0px;
}
</style>
<style scoped>
.personality_item_content {
	width: 90%;
	margin-left: 5%;
	display: flex;
	flex-wrap: wrap; /* Allow items to wrap to next line */
}
.personality_item {
	flex: 0 0 calc(25% - 10px); /* 4 items per row (25% width), accounting for 10px gap */
	height: 50px;
	margin: 5px; /* Half of 10px gap (spacing between items) */
	box-sizing: border-box; /* Prevent padding/border from affecting width */
	text-align: center;
	align-content: center;
	align-items: center;
	position: relative;
}

.personality_item_img {
	width: 100%;
	height: auto;
}

.personality_item_img img {
	width: 100%;
	height: auto;
	display: block; /* Remove extra space below image */
}

.personality_item_title {
	position: absolute; /* Overlay on top of the image */
	top: 50%; /* Center vertically */
	left: 50%; /* Center horizontally */
	transform: translate(-50%, -50%); /* Perfect centering */
	color: white; /* Adjust text color */
	font-size: 16px; /* Adjust font size */
	font-weight: bold;
	text-align: center;
	z-index: 1; /* Ensure text appears above the image */
	font-size: 8px;
	font-weight: bold;
	line-height: 11px;
	text-align: center;
	letter-spacing: normal;
	color: #ffffff;
}

.pizza_personality_btn_img {
	margin-top: 20px;
	width: 40%;
	margin-left: 30%;
	height: auto;
}
.pizza_personality_btn_img img {
	width: 100%;
	height: auto;
	display: block; /* Remove extra space below image */
}
.personality_item_bg {
	/* 透明度 */
	opacity: 0.7;
}

.personality_item_bg_active {
	/* 透明度 */
	opacity: 1;
}
</style>
<style scoped>
.pizza_question_bg {
	width: 90%;
	aspect-ratio: 586/662;
	margin-left: 5%;
	margin-top: 20px;
	background-size: contain;
	background-position: center;
	background-image: url("https://res.metaera.hk/resources/assets/images/pizza/组 192204@2x.png");
}

.pizza_question_title {
	padding-top: 35px;
	font-size: 19px;
	font-weight: bold;
	line-height: 35px;
	text-align: center;
	letter-spacing: normal;
	color: #ffffff;
}

.pizza_question_item {
	margin-top: 10%;
	padding-left: 10%;
	padding-right: 10%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.pizza_question_item_title {
	width: 80%;
	aspect-ratio: 426/90;
	font-size: 12px;
	font-weight: bold;

	letter-spacing: normal;
	color: #ffffff;
	background-size: contain;
	background-position: center;
	background-image: url("https://res.metaera.hk/resources/assets/images/pizza/组 192199@2x.png");

	display: flex; /* 新增 */
	justify-content: center; /* 新增 */
	align-items: center; /* 新增 */
	line-height: 1;
}
</style>
<style scoped>
.pizza_progress {
	width: 90%;
	margin-left: 5%;
	margin-top: 50px;
}

.pizza_download {
	margin-right: 20px;
	font-size: 14px;
	font-weight: 500;
	color: #c4c5c5;
	background: url("https://res.metaera.hk/resources/assets/images/pizza/组 192378@3x.png")
		center/contain no-repeat;
	height: 30px;
	aspect-ratio: 393/94;
	display: flex; /* 新增 */
	justify-content: center; /* 新增 */
	align-items: center; /* 新增 */
	line-height: 1;
}

.pizza_reset {
	margin-left: 20px;
	font-size: 14px;
	font-weight: 500;
	color: #c4c5c5;
	background: url("https://res.metaera.hk/resources/assets/images/pizza/组 192378@3x.png")
		center/contain no-repeat;
	height: 30px;
	aspect-ratio: 393/94;
	display: flex; /* 新增 */
	justify-content: center; /* 新增 */
	align-items: center; /* 新增 */
	line-height: 1;
}

.pizza_showmore p {
	color: white;
	font-size: 14px;
}

.pizza_showmore img {
	width: 16px;
	height: auto;
}

.pizza_btns {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}
</style>
